import React, {useCallback, useEffect, useState} from 'react';
import {Row, Col, Form, Input, Button, Layout, message} from 'antd';
import {connect} from "react-redux";
import {replace} from 'react-router-redux';
import {config, mUrl} from '../config';
import utils from '../utils/utils';
import {get} from '../utils/index';
import Checkbox from "antd/es/checkbox";
import md5 from 'blueimp-md5';
import {Logins} from "../utils/login";

const FormItem = Form.Item;

const Login = (props) => {
    const [loading, setLoading] = useState(false);
    const [twoCode, setTwoCode] = useState('');
    const [uid, setUid] = useState(utils.genUUID());
    const [form] = Form.useForm();
    const onResize = useCallback(() => {
        props.setAppState({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight,
            mobileModel: document.documentElement.clientWidth <= 768,
        });
    }, []);

    useEffect(() => {
        const check = utils.getData('check');
        if (check) {
            const loginname = utils.getData('loginname');
            const loginpwd = utils.getData('loginpwd');
            form.setFieldsValue({
                loginname, loginpwd
            });
        }
        window.addEventListener('resize', onResize);
        return (() => {
            window.removeEventListener('resize', onResize);
        });
    }, []);
    
    const onFinish = (values) => {
        setLoading(true);
        values.loginpwd = md5(values.loginpwd);
        values.type = '1';
        values.uid = uid;
        Logins.dologin(values).then(({data}) => {
            setLoading(false);
            if (data.state === 1) {
                message.success('登录成功');
                if (values.check) {
                    utils.setData('check', values.check);
                    utils.setData('loginname', values.loginname);
                    utils.setData('loginpwd', values.loginpwd);
                }
                utils.setToken(data.data.token);
                utils.setData('admin_nickname',data.data.name);
                utils.setData('permissionids',data.data.permissionids);
                props.setAppState({userInfo: data.data});
                props.replaceLocation('/main/message');
            } else {
                message.error('登录信息有误或账号无效，请重新填写');
            }
        });
    };

    const searchCode = () => {
        setUid(utils.genUUID());
    };

    return (
        <Layout style={{
            height: '100%',
            width: '100%',
            backgroundColor: '#fff',
            display: 'flex',
            flexDirection: 'column',
            padding: '5% 0 10% 0',
        }}>
            <Row type={"flex"} align={"bottom"} style={{marginLeft:127}}>
                <img style={{margin: '0 15px 5px 15px'}} src={require('../img/logo.png')} className={'logo'} alt=""/>
                <span style={{fontSize: 30, fontWeight: 'bold'}}>佛山</span>
                <div style={{width: 2, height: 40, margin: 7, backgroundColor: '#000'}}/>
                <span style={{fontSize: 20, fontWeight: 'bold', marginBottom: 3}}>南海区</span>
            </Row>
            <Row type={"flex"} justify={"center"} align={'center'}
                 style={{backgroundColor: 'rgba(13, 168, 222, 1)', flex: 1}}>
                <Col span={14}
                     style={{display: 'flex', alignItems: 'center'}}
                     xs={4} sm={9} md={8} lg={12} xl={12}
                >
                    <img src={require('../img/loginImg.png')} style={{height: '55%'}} alt=""/>
                </Col>
                <Col span={4} 
                     style={{display: 'flex', alignItems: 'center'}}
                     xs={18} sm={12} md={12} lg={8} xl={6}
                >
                    <div style={{width: 350}}>
                        <div className={'login-form-background'}>
                            <div className={'login-form-title'}>
                                <span>管理员登录</span>
                            </div>
                            <Form
                                form={form}
                                onFinish={onFinish}
                                className={'login-form'}>
                                <div style={{display: 'flex', alignItems: 'center', marginTop: 20}}>
                                    <div className={'login-form-input'} style={{flex: 1}}>
                                        <img className={'login-form-img'} src={require('../img/login-user-name.png')}
                                             alt=""/>
                                        <div className={'login-form-line'}/>
                                        <span>账号</span>
                                        <FormItem 
                                            style={{margin: 0, flex: 1}} 
                                            name={"loginname"}
                                        >
                                            <Input type={"text"}
                                                   bordered={false}
                                                   placeholder={'请输入账号'}
                                                   className={'login-input'}/>
                                        </FormItem>
                                    </div>
                                </div>
                                <div style={{display: 'flex', alignItems: 'center'}}>
                                    <div className={'login-form-input'} style={{flex: 1}}>
                                        <img className={'login-form-img'} src={require('../img/login-user-pw.png')}
                                             alt=""/>
                                        <div className={'login-form-line'}/>
                                        <span>密码</span>
                                        <FormItem 
                                            style={{margin: 0, flex: 1}} 
                                            name={"loginpwd"}
                                        >
                                            <Input.Password type={"loginpwd"}
                                                   bordered={false}
                                                   placeholder={'请输入密码'}
                                                   className={'login-input'}
                                            />
                                        </FormItem>
                                    </div>
                                </div>
                                <div style={{display: 'flex', alignItems: 'center'}}>
                                    <div className={'login-form-input'} style={{flex: 3}}>
                                        <img style={{width: 26, margin: 3}} src={require('../img/login-user-code.png')}
                                             alt=""/>
                                        <div className={'login-form-line'}/>
                                        <span>验证码</span>
                                        <FormItem 
                                            style={{margin: 0, flex: 1}} 
                                            name={"msgcode"}
                                        >
                                            <Input placeholder={'请输入'}
                                                   bordered={false}
                                                   className={'login-input'}
                                            />
                                        </FormItem>
                                    </div>
                                    <div
                                        className='exit'
                                        style={{
                                            flex: 2,
                                            backgroundColor: '#fff',
                                            marginRight: 16,
                                            height: 50,
                                            borderRadius: 10,
                                            textAlign: 'center',
                                        }}
                                        onClick={() => {
                                            searchCode();
                                        }}
                                    >
                                        <img src={mUrl.getVerifyCode + '?uid=' + uid} alt=""/>
                                    </div>
                                </div>
                                <div style={{marginLeft: 15}}>
                                    <FormItem name={'check'}>
                                        <Checkbox/>
                                        <span style={{color: '#ffffff', marginLeft: 3}}>记住密码</span>
                                    </FormItem>
                                </div>
                                <FormItem style={{marginTop: 10}} className={'bottom-button'} name={'login'}>
                                    <Button loading={loading} htmlType="submit" type={'primary'}
                                            className={'login-button'}>登录</Button>
                                </FormItem>
                            </Form>
                        </div>
                    </div>
                </Col>
            </Row>
            <Row style={{marginTop: 10}}>
                <Col style={{textAlign: 'center'}} span={14}>
                    <span style={{color: 16}}>版权所有：佛山xxxx公司  粤ICP备***********号</span>
                </Col>
                <Col span={10}>
                    <span style={{color: 16}}>技术支持：佛山市XX有限公司&nbsp;&nbsp;&nbsp;&nbsp;联系方式：123456</span>
                </Col>
            </Row>
        </Layout>
    );
};

const mapStateToProps = (state) => {
    return {
        ...state.appReducer, // 全局的reducers
    };
};

const mapDispatchToProps = (dispatch) => ({
    // 关闭单前页面，跳转页面
    replaceLocation(path, data = {}) {
        dispatch(replace(config.path + path, data));
    },
    // 设置全局的state
    setAppState(state) {
        dispatch({type: 'setAppState', state: state});
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);
